import { useRoutes } from 'react-router-dom'
import Home from '../views/index'
import Login from '../views/login'
import Registry from '../views/registry'
import Page404 from '../views/404'
import Expenses from "../views/expenses"
import Invoices from "../views/invoices"
import Invoice from "../views/invoices/Detail"

const HomeIndex = () => (<main style={{ padding: "1rem" }}><p>Select a Tab</p></main>)
const InvoiceIndex = () => (<main style={{ padding: "1rem" }}><p>Select an invoice</p></main>)

export const routes = Object.freeze([
  {
    element: <Home/>,
    path: '/',
    auth: true,
    children: [
      {
        element: <HomeIndex />,
        index: true,
      },
      {
        element: <Expenses />,
        path: 'expenses',
      },
      {
        element: <Invoices />,
        path: 'invoices',
        children: [
          {
            element: <InvoiceIndex />,
            index: true,
          },
          {
            element: <Invoice />,
            path: ':invoiceId',
          },
        ]
      },
    ],
  },
  {
    element: <Login />,
    path: '/login',
  },
  {
    element: <Registry />,
    path: '/registry',
  },
  {
    element: <Page404 />,
    path: '*',
  },
])

const Router = () => useRoutes(routes)

export default Router
